import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { columns } from "./SimpleData";
import { DevGrid } from "~/public/cpas-ui";
import { LoadIndicator } from "devextreme-react";
import PubSub from 'pubsub-js';


const DevGridRangeTap: React.FC<any> = React.forwardRef((props: any, ref) => {
    const { SubjectSDBData1, curTableDataChangeTime } = props;
    const DataRef = useRef<any>();
    const [tempData, setTempData] = useState<any[]>([]);
    // const [openVisible111111, setOpenVisible111111] = useState<boolean>(false);




    function getGridInstance() {
        if (DataRef.current) {
            return DataRef.current.instance;
        }
        return false;
    }
    useEffect(() => {
        const gridInstFunc = getGridInstance();
        if (gridInstFunc) {
            const scrollableSet = gridInstFunc?.getScrollable();
            scrollableSet?.scrollTo({ top: 0 });
            setTempData(SubjectSDBData1);
            gridInstFunc.refresh();
        }
    }, [curTableDataChangeTime]);

    const column1 = ["QCZXJFJE", "QCZXDFJE", "QCZXJE", "QCCFLJFJE", "QCCFLDFJE", "QCCFLJE", "QCSDS", "ZXJFJE", "ZXDFJE",
        "ZXJE", "CFLJFJE", "CFLDFJE", "CFLJE", "SDS", "ZXJFFSE", "ZXDFFSE", "ZXFSE", "CFLJFFSE", "CFLDFFSE", "CFLFSE", "SDLJFSE", "SDLJFSE", "QCZXDFFSE",
        "QCZXFSE", "QCCFLJFFSE", "QCCFLDFFSE", "QCCFLFSE", "QCSDLJFSE",];
    const column2 = ["QCZBJE", "QCZBJFJE", "QCZBDFJE", "QCWSS", "QCZXJFJE", "QCZXDFJE", "ZBJE",
        "WSS", "ZBJFFSE", "ZBDFFSE", "ZBFSE", "QCZBJFFSE", "QCZBDFFSE", "QCZBFSE", "QCWSLJFSE", "ZBJFJE", "WSLJFSE", "ZBDFJE",];
    const column3 = ["QCYE", "QMYE", "LJFSE", "JFLJFSE", "DFLJFSE", "QCLJFSE",];


    const GridColumnReviewState = (r: boolean) => {
        const gridInstFunc = getGridInstance();
        if (gridInstFunc) {
            column1.forEach((item) => {
                gridInstFunc.columnOption(item, "visible", r);
            });
        }

        // gridInstFunc.columnOption("QCZXJFJE", "visible", r);
        // gridInstFunc.columnOption("QCZXDFJE", "visible", r);
        // gridInstFunc.columnOption("QCZXJE", "visible", r);
        // gridInstFunc.columnOption("QCCFLJFJE", "visible", r);
        // gridInstFunc.columnOption("QCCFLDFJE", "visible", r);
        // gridInstFunc.columnOption("QCCFLJE", "visible", r);
        // gridInstFunc.columnOption("QCSDS", "visible", r);
        // gridInstFunc.columnOption("ZXJFJE", "visible", r);
        // gridInstFunc.columnOption("ZXDFJE", "visible", r);
        // gridInstFunc.columnOption("ZXJE", "visible", r);
        // gridInstFunc.columnOption("CFLJFJE", "visible", r);
        // gridInstFunc.columnOption("CFLDFJE", "visible", r);
        // gridInstFunc.columnOption("CFLJE", "visible", r);
        // gridInstFunc.columnOption("SDS", "visible", r);
        // gridInstFunc.columnOption("ZXJFFSE", "visible", r);
        // gridInstFunc.columnOption("ZXDFFSE", "visible", r);
        // gridInstFunc.columnOption("ZXFSE", "visible", r);
        // gridInstFunc.columnOption("CFLJFFSE", "visible", r);
        // gridInstFunc.columnOption("CFLDFFSE", "visible", r);
        // gridInstFunc.columnOption("CFLFSE", "visible", r);
        // gridInstFunc.columnOption("SDLJFSE", "visible", r);
        // gridInstFunc.columnOption("QCZXJFFSE", "visible", r);
        // gridInstFunc.columnOption("QCZXDFFSE", "visible", r);
        // gridInstFunc.columnOption("QCZXFSE", "visible", r);
        // gridInstFunc.columnOption("QCCFLJFFSE", "visible", r);
        // gridInstFunc.columnOption("QCCFLDFFSE", "visible", r);
        // gridInstFunc.columnOption("QCCFLFSE", "visible", r);
        // gridInstFunc.columnOption("QCSDLJFSE", "visible", r);
    };
    const GridColumnEndState = (r: boolean) => {
        const gridInstFunc = getGridInstance();
        if (gridInstFunc) {
            column2.forEach((item) => {
                gridInstFunc.columnOption(item, "visible", r);
            });
        }


        // gridInstFunc.columnOption("QCZBJE", "visible", r);
        // gridInstFunc.columnOption("QCZBJFJE", "visible", r);
        // gridInstFunc.columnOption("QCZBDFJE", "visible", r);
        // gridInstFunc.columnOption("QCWSS", "visible", r);
        // gridInstFunc.columnOption("QCZXJFJE", "visible", r);
        // gridInstFunc.columnOption("QCZXDFJE", "visible", r);
        // gridInstFunc.columnOption("ZBJE", "visible", r);
        // gridInstFunc.columnOption("WSS", "visible", r);
        // gridInstFunc.columnOption("ZBJFFSE", "visible", r);
        // gridInstFunc.columnOption("ZBDFFSE", "visible", r);
        // gridInstFunc.columnOption("ZBFSE", "visible", r);
        // gridInstFunc.columnOption("QCZBJFFSE", "visible", r);
        // gridInstFunc.columnOption("QCZBDFFSE", "visible", r);
        // gridInstFunc.columnOption("QCZBFSE", "visible", r);
        // gridInstFunc.columnOption("QCWSLJFSE", "visible", r);
        // gridInstFunc.columnOption("ZBJFJE", "visible", r);
        // gridInstFunc.columnOption("WSLJFSE", "visible", r);
        // gridInstFunc.columnOption("ZBDFJE", "visible", r);
    };

    const GridColumnStates = (r: boolean) => {
        const gridInstFunc = getGridInstance();
        if (gridInstFunc) {
            column3.forEach((item) => {
                gridInstFunc.columnOption(item, "visible", r);
            });
        }
        // gridInstFunc.columnOption("QCYE", "visible", r);
        // gridInstFunc.columnOption("QMYE", "visible", r);
        // gridInstFunc.columnOption("LJFSE", "visible", r);
        // gridInstFunc.columnOption("JFLJFSE", "visible", r);
        // gridInstFunc.columnOption("DFLJFSE", "visible", r);
        // gridInstFunc.columnOption("QCLJFSE", "visible", r);
    };




    // 类型 的每一个状态
    const changeStates = (v: any, isState: boolean) => {
        if (v.id === '0') {
            GridColumnStates(isState);
        } else if (v.id === '1') {
            GridColumnEndState(isState);
        } else {
            GridColumnReviewState(isState);
        }
    };



    useImperativeHandle(ref, () => ({
        // 过滤功能 还不完善
        // 审定数
        // dataGridColumnChange: (r: any, isState: boolean) => {
        //     changeStates(r, isState);
        // },
        // // //末审数 
        // DataGridColumnEndState: (r: any) => {
        //     GridColumnEndState(r);
        // },
        // // 账面数
        // DataGridColumnState: (r: boolean) => {
        //     GridColumnStates(r);
        // },

        DevGridRefState: () => {
            if (DataRef.current) {
                return DataRef.current;
            }
            return null;
        },
    }));

    PubSub.unsubscribe('dataGridColumn');
    PubSub.subscribe('dataGridColumn', async (msg: any, data: any) => {
        if (data.msg === 'changeColumn') {
            console.log(data, '@@@');

            changeStates(data.data.v, data.data.isState);
        }
    });

    const tmepDataGrid = useMemo(() => {
        return <DevGrid.RangeTap
            width="100%"
            ref={DataRef}
            dataSource={tempData}
            keyExpr="ID"
            height="100%"
            defaultColumns={columns}
            allowColumnReordering={true}
            showBorders={true}
            showRowLines={true}
            showColumnLines={true}
            allowColumnResizing={true}
            columnMinWidth={100}
            columnAutoWidth={true}
            sheetName="科目明细汇总表"
            excelName="科目明细汇总表"
            scrolling={{
                mode: "virtual",
                rowRenderingMode: "virtual",
                renderAsync: true
            }}
            loadPanel={{
                enabled: true,
                text: 'Loading...',
            }}
            paging={{ enabled: false }}
        />
    }, [tempData]);
    // const loadIndicatorTemp = useMemo(() => {
    //     return (<> {openVisible111111 && <div style={{
    //         position: 'absolute', top: "0px", left: "0px", width: '100%', height: '100%', display: 'flex', alignItems: "center", justifyContent: "center", borderRadius: '5px',
    //         opacity: 0.5, zIndex: "9", background: "#ddd"
    //     }}>
    //         <LoadIndicator id="medium-indicator" height={50} width={50} />
    //     </div>} </>)
    // }, [openVisible111111]);
    return (
        <>
            <div style={{ width: '100%', height: '100%', position: 'relative' }}>
                {tmepDataGrid}
                {/* {loadIndicatorTemp} */}
            </div>
        </>
    )

})

export default DevGridRangeTap;